import AMapJS from "amap-js";
import React, { useEffect, useState } from "react";
import { MapInfo } from "../../../utils/MapInfo";
import "./style.css";
import { connect } from "react-redux";

function ScreenMap(props) {
  let myMap = null;
  const [MyMap, setMyMap] = useState(null);
  let MyAMap = null;

  // console.log(props);

  //初始化地图
  const mapInit = () => {
    const aMapJSAPILoader = new AMapJS.AMapJSAPILoader({
      v: MapInfo.version,
      key: MapInfo.key
    });

    const aMapUILoader = new AMapJS.AMapUILoader({
      v: MapInfo.UIVersion // UI组件库版本号
    });

    aMapJSAPILoader.load().then(AMap => {
      aMapUILoader.load().then(initAMapUI => {
        const AMapUI = initAMapUI();
        MyAMap = AMap;
        AMap.plugin("AMap.DistrictSearch", () => {
          new AMap.DistrictSearch({
            extensions: "all",
            subdistrict: 0,
            level: "district"
          }).search(props.regionName, function(status, result) {
            AMap.plugin("Map3D", () => {
              var bounds = result.districtList[0].boundaries;

              // console.log(bounds);
              var mask = [];
              for (var i = 0; i < bounds.length; i += 1) {
                mask.push([bounds[i]]);
              }
              const map = new AMap.Map("map", {
                mask: mask,
                center: [104.065668, 30.657493],
                expandZoomRange: true,
                disableSocket: true,
                viewMode: "3D",
                showLabel: true,
                labelzIndex: 130,
                mapStyle: "amap://styles/1f9825940198d449fe6dd1e3de66325b",
                pitch: 70,
                zooms: [12, 20],
                layers: [
                  new AMap.TileLayer({
                    zIndex: 2
                    // zoom: 20
                  }),
                  new AMap.Buildings(),
                  new AMap.LabelsLayer()
                ]
              });
              //添加高度面
              var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
              map.add(object3Dlayer);
              var height = -5000;
              var color = "#0088ffcc"; //rgba
              var wall = new AMap.Object3D.Wall({
                path: bounds,
                height: height,
                color: color
              });
              wall.transparent = true;
              object3Dlayer.add(wall);
              // 添加描边x
              for (var i = 0; i < bounds.length; i += 1) {
                new AMap.Polyline({
                  path: bounds[i],
                  strokeColor: "#99ffff",
                  strokeWeight: 2,
                  map: map
                });
              }

              map.setFitView();

              setMyMap(map);
            });
          });
        });
        //新建infoWindow
        // map.destroy();
      });
    });
  };

  const mapUpdate = () => {
    const aMapJSAPILoader = new AMapJS.AMapJSAPILoader({
      v: MapInfo.version,
      key: MapInfo.key
    });

    const aMapUILoader = new AMapJS.AMapUILoader({
      v: MapInfo.UIVersion // UI组件库版本号
    });

    aMapJSAPILoader.load().then(AMap => {
      aMapUILoader.load().then(initAMapUI => {
        const AMapUI = initAMapUI();
        MyAMap = AMap;

        AMap.plugin("AMap.DistrictSearch", () => {
          new AMap.DistrictSearch({
            extensions: "all",
            subdistrict: 0,
            level: "district"
          }).search(props.regionName, function(status, result) {
            AMap.plugin("Map3D", () => {
              var bounds = result.districtList[0].boundaries;

              // console.log(bounds);
              var mask = [];
              for (var i = 0; i < bounds.length; i += 1) {
                mask.push([bounds[i]]);
              }

              // console.log(myMap);
              if (myMap !== null) myMap.destroy();
              // console.log(myMap);
              myMap = new AMap.Map("map", {
                mask: mask,
                center: [104.065668, 30.657493],
                expandZoomRange: true,
                disableSocket: true,
                viewMode: "3D",
                showLabel: true,
                labelzIndex: 130,
                mapStyle: "amap://styles/1f9825940198d449fe6dd1e3de66325b",
                pitch: 50,
                zooms: [11, 20],
                layers: [
                  new AMap.TileLayer({
                    zIndex: 2
                    // zoom: 20
                  }),
                  new AMap.Buildings(),
                  new AMap.LabelsLayer()
                ]
              });
              //添加高度面
              var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
              myMap.add(object3Dlayer);
              var height = -8000;
              var color = "#0088ffcc"; //rgba
              var wall = new AMap.Object3D.Wall({
                path: bounds,
                height: height,
                color: color
              });
              wall.transparent = true;
              object3Dlayer.add(wall);
              // 添加描边x
              for (var i = 0; i < bounds.length; i += 1) {
                new AMap.Polyline({
                  path: bounds[i],
                  strokeColor: "#99ffff",
                  strokeWeight: 2,
                  map: myMap
                });
              }

              myMap.setFitView();

              setMyMap(myMap);
              // myMap = map;
            });
          });
        });
        //新建infoWindow
        // map.destroy();
      });
    });
  };

  //清空地图
  const cleanUp = () => {
    // console.log(MyMap);
    if (MyMap !== null) {
      MyMap.destroy();
    }
  };

  // useEffect(() => {
  //   if (MyMap === null) mapInit();
  // }, []);

  useEffect(() => {
    // console.log(props.area);
    if (props.regionName !== "") mapUpdate();
  }, [props.regionName]);

  return (
    <div
      id={"map"}
      style={{
        width: "100%",
        height: "100%"
      }}
    ></div>
  );
}

const mapStateToProps = state => {
  return state.bigScreenInfo.screenInfo;
};

export default connect(mapStateToProps, null)(ScreenMap);
